﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>路由嵌套</title>
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>	
	<script type="text/javascript" src="bower_components/vue-router/dist/vue-router.js"></script>	
	<style type="text/css">
		.v-link-active{color:#f34}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><a v-link="{path:'/home'}">首 页</a></li>
			<li><a v-link="{path:'/news'}">新闻页</a></li>
		</ul>
		<div>
			<router-view></router-view>
		</div>
	</div>
	<template id="home">
		<h1>欢迎来到首页</h1>
		<div>
			<a v-link="{path:'/home/login/aaa'}">登录</a>
			<a v-link="{path:'/home/reg'}">注册</a>
		</div>
		<div>
			<router-view></router-view>
		</div>
	</template>
	<template id="news">
		<h1>欢迎来到新闻页</h1>
		<div>
			<a v-link="{path:'/news/detail/001?a=2&b=3'}">新闻001</a>
			<a v-link="{path:'/news/detail/002'}">新闻002</a>
		</div>
		<div>
			<router-view></router-view>
		</div>
	</template>
	<template id="detail">
		{{$route | json}} 
		 <br />
		 <br />
		{{$route.path}}
		<br />
		<br />
		{{$route.params | json}}
		<br />
		<br />
		<!-- url 里面传的参 -->
		{{$route.query | json}}
	</template>
<script type="text/javascript">
	<!-- 建立一个根组件 必须的 -->
	var app = Vue.extend();
	<!-- 准备home news组件 -->
	var Home = Vue.extend({
		template:"#home"
	});
	var News = Vue.extend({
		template:"#news"
	});
	<!-- 路由 -->
	var router =new VueRouter();
	<!-- 关联 -->
	var Detail = Vue.extend({
		template:"#detail"
	});
	router.map({
		'home':{
			component:Home,
			subRoutes:{
				"login/:name":{
					component:{
						template:"我是登录页{{$route.params | json}}"
					}
				},
				"reg":{
					component:{
						template:"我是新闻页"
					}
				}
			}
		},
		'news':{
			component:News,
			subRoutes:{
				"/detail/:id":{
					component:Detail
				}
			}
		}
	});
	<!-- 启动 -->
	router.start(app,"#box");
	<!-- 开始的跳转 -->
	router.redirect({
		"/":"home"
	});
</script>
</body>
</html>